<template>
  <el-main>
    <div>
      <div id="line+bar" style="width: 600px;height: 600px;float: left"></div>
      <div id="getAvgMonthlySalary" style="width: 600px;height: 600px;float: right"></div>
    </div>
    <div>
      <div id="pie" style="width: 600px;height: 600px;float: left"></div>
      <div id="getAllStaffNumber" style="width: 600px;height: 600px;float: right"></div>
    </div>
  </el-main>
</template>

<script>

    import * as echarts from 'echarts';
    import http from "../../../utils/request";

    export default {
        name: "dataList",
        data() {
            return {

            }
        },
        //页面元素渲染之后再触发mounted()函数
        mounted(){
            this.getProgrammerNumber();
            this.getFileType();
            this.getAllStaffNumber();
            this.getAvgMonthlySalary();
        },
        methods: {
            getProgrammerNumber(){
                //合并（折线图+柱状图）
                var chartDom = document.getElementById('line+bar');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '各季度入职程序员数量统计趋势图',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['第一季度','第二季度','第三季度','第四季度']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: [],
                            type: 'line'
                        },
                        {
                            data: [],
                            type: 'bar'
                        }
                    ]
                };
                http.get("/echarts/getProgrammerNumber").then((res)=>{
                    console.log(res.data);
                    option.series[0].data = res.data;
                    option.series[1].data = res.data;
                    //接收后端的数据，数据准备完成后再赋值
                    myChart.setOption(option)
                })
            },
            getFileType(){
                //扇形图
                var chartDom = document.getElementById('pie');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '公司文件类型及数量扇形图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                http.get("/echarts/getFileType").then((res)=>{
                    console.log(res.data);
                    option.series[0].data = [
                        {name: 'TXT',value: res.data[0]},
                        {name: 'JPG',value: res.data[1]},
                        {name: 'PNG',value: res.data[2]},
                        {name: 'WEBP',value: res.data[3]},
                        {name: 'XLS',value: res.data[4]},
                        {name: 'XLSX',value: res.data[5]},
                        {name: 'DOC',value: res.data[6]},
                        {name: 'DOCX',value: res.data[7]},
                        {name: 'PPT',value: res.data[8]},
                        {name: 'PPTX',value: res.data[9]},
                        {name: 'MP3',value: res.data[10]},
                        {name: 'MP4',value: res.data[11]},
                        {name: 'ZIP',value: res.data[12]},
                        {name: 'RAR',value: res.data[13]},
                        {name: 'SQL',value: res.data[14]}
                    ];
                    //接收后端的数据，数据准备完成后再赋值
                    myChart.setOption(option)
                })
            },
            getAllStaffNumber(){
                //扇形图
                var chartDom = document.getElementById('getAllStaffNumber');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '公司全体职工所在岗位及数量扇形图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                http.get("/echarts/getAllStaffNumber").then((res)=>{
                    console.log(res.data);
                    option.series[0].data = [
                        {name: '董事长',value: res.data[0]},
                        {name: '总经理',value: res.data[1]},
                        {name: '项目总监',value: res.data[2]},
                        {name: '项目组长',value: res.data[3]},
                        {name: '程序员',value: res.data[4]},
                        {name: '普通员工',value: res.data[5]},
                    ];
                    //接收后端的数据，数据准备完成后再赋值
                    myChart.setOption(option)
                })
            },
            getAvgMonthlySalary(){
                //扇形图
                var chartDom = document.getElementById('getAvgMonthlySalary');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '各个岗位职工的月平均薪资（元）扇形图',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                http.get("/echarts/getAvgMonthlySalary").then((res)=>{
                    console.log(res.data);
                    option.series[0].data = [
                        {name: '总经理',value: res.data[0]},
                        {name: '项目总监',value: res.data[1]},
                        {name: '项目组长',value: res.data[2]},
                        {name: '程序员',value: res.data[3]},
                        {name: '普通员工',value: res.data[4]},
                    ];
                    //接收后端的数据，数据准备完成后再赋值
                    myChart.setOption(option)
                })
            }
        }
    }
</script>

<style scoped>








</style>
